import { useEffect, useRef } from "react";
import * as echarts from "echarts";

const BarChart = ({title}) => {
  const chartRef = useRef(null);
  useEffect(() => {
    // 获取图表节点
    const chartDom = chartRef.current;
    // 初始化图表实例
    const myChart = echarts.init(chartDom);
    // 图表相关配置
    const option = {
      title: {
        text: title,
      },
      xAxis: {
        type: "category",
        data: ["Vue", "React", "Angular"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150],
          type: "bar",
        },
      ],
    };

    // 使用图表
    option && myChart.setOption(option);
  }, []);
  return <div ref={chartRef} style={{ width: "400px", height: "300px" }} />;
};

export default BarChart